import { useEffect, useState } from 'react';
import styles from './index.less';

export default function ScreenCom(props: any) {
  const [screen, setScreen] = useState<{ width: number; height: number }>({
    width: 1920,
    height: 1080,
  });
  useEffect(() => {
    calcScreenScale();
    window.addEventListener('resize', calcScreenScale);
    console.log('props', props);
    return () => {
      window.removeEventListener('resize', calcScreenScale);
    };
  }, []);
  const calcScreenScale = () => {
    const scaleH = window.innerHeight / screen.height;
    const scaleW = window.innerWidth / screen.width;
    console.log(window.innerHeight);

    const scale = Math.min(scaleH, scaleW).toFixed(6);
    document.documentElement.style.setProperty('--scale', scale);
    document.getElementById('screen').style.transformOrigin = `left top`;
    document.getElementById('screen').style.transform =
      `scale(${scale}) transLate(-50%,-50%)`;
  };
  return (
    <div className={styles.screen_com}>
      <div id="screen" className={styles.screen_wrap}>
        {props.children}
      </div>
    </div>
  );
}
